<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>用户信息管理</title>
    <link rel="stylesheet" href="/component/pear/css/pear.css"/>
    <link rel="stylesheet" href="/css/teacher_info.css">
</head>

<body class="pear-container" style="margin: 10px">
<div class="layui-panel " style="margin-bottom: 10px">
    <div style="padding: 20px; text-align: center; display: flex; align-items: center; justify-content: center;">
        <!-- SVG Icon -->
        <svg t="1735396344532" class="icon" viewBox="0 0 1245 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
             p-id="6085" width="32" height="32" style="margin-right: 10px;">
            <path d="M161.71294076 877.34014209l-1.08669375-0.60087744-1.39352518-0.71593946c-23.17854463-10.72630898-50.97234288-23.01234433-69.17766416-49.14413964-9.02595323-12.98919024-8.94924492-38.86529239-9.86973838-61.00828154V152.32345156a0.11506203 0.11506203 0 0 0-0.12784658-0.11506202A71.69623683 71.69623683 0 0 0 17.10592681 222.98413291v625.55222549a20.91566425 20.91566425 0 0 0 0.92049345 6.09827079 85.75933623 85.75933623 0 0 0 26.68153449 40.47615704 90.48965185 90.48965185 0 0 0 52.34029891 18.0007664c18.35873701 1.27846319 36.84531972 2.01997266 54.16850129 2.4930044 21.31198769 0.54973916 29.11061514-27.8577211 10.49618581-38.26441494z"
                  p-id="6086"></path>
            <path d="M236.78432172 76.88131631v-0.0767083q-3.70754473-1.03555547-7.4406577-2.01997266l-0.43467716-0.11506113c-17.75785869-4.71753018-35.79697969-8.70633721-53.86167069-11.90249649a49.39983281 49.39983281 0 0 0-15.59725575-0.26847684 71.59396026 71.59396026 0 0 0-61.25118927 70.72460507v609.75041484a96.89475411 96.89475411 0 0 0 19.03632275 58.06781543l0.24290773 0.33240058a171.79993477 171.79993477 0 0 0 60.84208123 46.31873556c37.53569002 21.05629541 56.4058125 31.74425068 74.76454953 40.16932558 67.38781465 29.92883201 137.05129511 55.33190332 178.26896074 69.81689531a49.75780253 49.75780253 0 0 0 29.90326289 1.20175577 71.59396026 71.59396026 0 0 0 52.13574403-68.80690987V537.281617l0.33240059-216.06034307a51.13854317 51.13854317 0 0 0-4.62803818-21.32477227c-6.12384084-13.43665194-14.70233145-26.52811875-21.46540342-39.13377012C429.4871362 151.99105098 319.47534615 100.85250782 236.78432172 76.88131631zM936.62806499 801.79573028a130.40328428 130.40328428 0 0 0 15.45662461-26.60482704 46.81733556 46.81733556 0 0 0 3.83539131-18.61443019V133.63231396A71.51725195 71.51725195 0 0 0 884.90142897 62.17898486c-20.07187822 3.34957412-40.02869443 7.67078174-59.69146377 12.89969737l-0.43467804 0.11506202q-3.72032931 0.99720176-7.44065771 2.01997265v0.07670742c-82.7038081 24.03511523-192.70281445 75.12251924-250.86012187 183.81749237-8.74469092 16.30041065-20.4554171 33.36789903-26.10622619 50.99791204l0.35796975 225.58489715v352.85594502a71.50446739 71.50446739 0 0 0 71.01865194 71.4533291c38.89086153-13.51336026 115.44526055-40.91083417 189.28931573-73.66507118 18.35873701-8.4250749 37.2160749-19.11303017 74.76454951-40.1693256a171.79993477 171.79993477 0 0 0 60.82929667-46.36987294z"
                  p-id="6087"></path>
            <path d="M974.08704762 152.63028213a0.11506203 0.11506203 0 0 0-0.1278457 0.11506201v613.54745245c-0.89492432 22.14298916-0.84378604 48.01909131-9.86973927 61.00828153-18.20532128 26.1829336-46.02468867 38.41783067-69.17766328 49.14413965l-1.39352518 0.71593945-1.08669464 0.60087833c-18.6144293 10.40669385-10.82858643 38.8141541 10.48340128 38.23884492 17.31039697-0.46024717 35.79697969-1.27846319 54.16850126-2.49300349a90.48965185 90.48965185 0 0 0 52.34029893-18.00076729 85.75933623 85.75933623 0 0 0 26.68153446-40.47615706 20.91566425 20.91566425 0 0 0 0.92049434-6.0982708V223.40602549a71.69623683 71.69623683 0 0 0-62.9387622-70.77574336z"
                  p-id="6088"></path>
        </svg>
        <!-- Title -->
        <h1><strong>用户信息管理</strong></h1>
    </div>
</div>
</div>
<div class="layui-card">
    <div class="layui-card-body">
        <form class="layui-form" id="queryForm" action="">
            <div class="layui-form-item">
                <div class="layui-form-item layui-inline">
                    <label class="layui-form-label">用户名</label>
                    <div class="layui-input-inline">
                        <input id="input_userName" name="userName" type="text" placeholder="用户名"
                               class="layui-input">
                        <i class="layui-icon layui-icon-clear" id="btn_clear_userName"></i>
                    </div>
                </div>

                <div class="layui-form-item layui-inline">
                    <label class="layui-form-label">用户Id</label>
                    <div class="layui-input-inline">
                        <input id="input_roleId" name="roleId" type="text" placeholder="用户Id" class="layui-input">
                        <i class="layui-icon layui-icon-clear" id="btn_clear_roleId"></i>
                    </div>
                </div>

                <div class="layui-form-item layui-inline">
                    <label class="layui-form-label">角色名称</label>
                    <div class="layui-input-inline">
                        <input id="input_roleName" name="roleName" data-tno="" type="text"
                               placeholder="角色名称(教师/学生姓名)"
                               class="layui-input">
                        <i class="layui-icon layui-icon-clear" id="btn_clear_roleName"></i>
                    </div>
                </div>

                <div class="layui-form-item layui-inline">
                    <label class="layui-form-label">是否启用</label>
                    <div class="layui-input-inline">
                        <select id="input_isLocked" name="isLocked">
                            <option value="">请选择</option>
                            <option value="1">已启用</option>
                            <option value="0">已禁用</option>
                        </select>
                    </div>
                </div>

                <div class="layui-form-item layui-inline">
                    <label class="layui-form-label">用户类型</label>
                    <div class="layui-input-inline">
                        <select id="input_userType" name="userType">
                            <option value="">请选择</option>
                            <option value="1">超级管理员</option>
                            <option value="2">教师</option>
                            <option value="3">学生</option>
                        </select>
                    </div>
                </div>


                <div class="layui-form-item layui-inline">
                    <!--查询按钮-->
                    <button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="user-query">
                        <i class="layui-icon layui-icon-search"></i>
                        查询
                    </button>
                    <button id="btn_reset" type="reset" class="pear-btn pear-btn-md">
                        <i class="layui-icon layui-icon-refresh"></i>
                        重置
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>
<div class="layui-card">
    <div class="layui-card-body">
        <!--教师信息表格-->
        <table id="user-table" lay-filter="user-table"></table>
    </div>
</div>

<!--顶部工具栏-->
<script type="text/html" id="user-toolbar">
    <button class="pear-btn pear-btn-primary pear-btn-md" lay-event="add">
        <i class="layui-icon layui-icon-add-1"></i>
        新增
    </button>
    <button class="pear-btn pear-btn-danger pear-btn-md" lay-event="batchRemove">
        <i class="layui-icon layui-icon-delete"></i>
        删除
    </button>

    <button class="pear-btn pear-btn-primary pear-btn-md" id="rowMode">
        <span>{{= d.lineStyle ? '多行' : '单行' }}模式</span>
        <i class="layui-icon layui-icon-down layui-font-12"></i>
    </button>
</script>

<!--表格每行的工具栏：编辑、删除-->
<script type="text/html" id="user-bar">
    <button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>
    </button>
    <button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="remove"><i class="layui-icon layui-icon-delete"></i>
    </button>
</script>

<script type="text/html" id="user-enable">
    <input type="checkbox" name="enable" value="{{d.id}}" lay-skin="switch" lay-text="启用|禁用"
           lay-filter="user-enable" {{ d.isLocked== true ? 'checked' : '' }} />
</script>

<script src="/component/layui/layui.js"></script>
<script src="/component/pear/pear.js"></script>

<script>
    layui.use(['table', 'form', 'jquery', 'common', 'dropdown'], function () {
        let table = layui.table;
        let form = layui.form;
        let $ = layui.jquery;
        let common = layui.common;
        let dropdown = layui.dropdown;

        // 设置对话框文件路径
        let MODULE_PATH = "/dialog/user-info/";

        let cols = [
            [{
                type: 'checkbox',
                fixed: 'left' // 固定列
            },
                {
                    title: 'id',
                    field: 'id',
                    align: 'center',
                    fixed: 'left', // 固定列
                    sort: true,
                    width: 100
                },
                {
                    title: '用户名',
                    field: 'userName',
                    align: 'center'
                },
                {
                    title: '角色Id',
                    field: 'roleId',
                    width: 100,
                    align: 'center'
                },
                {
                    title: '角色名称',
                    field: 'roleName',
                    align: 'center',
                },
                {
                    title: '密码',
                    field: 'password',
                    width: 100,
                    align: 'center'
                },
                {
                    title: '用户类型',
                    field: 'userType',
                    align: 'center',
                    templet: function (d) {
                        switch (d.userType) {
                            case 1:
                                return '超级管理员';
                            case 2:
                                return '教师';
                            case 3:
                                return '学生';
                        }
                    }
                },
                {
                    title: '启用',
                    field: 'isLocked',
                    align: 'center',
                    templet: '#user-enable'
                },
                {
                    title: '注册时间',
                    field: 'registerTime',
                    align: 'center'
                },
                {
                    fixed: 'right', // 固定列
                    title: '操作',
                    toolbar: '#user-bar',
                    align: 'center',
                    width: 130
                }
            ]
        ]

        let user = getSearchCondition(); //获取搜索条件

        table.render({
            elem: '#user-table',
            autoSort: false, // 禁用前端自动排序。
            url: '/api/user/page', //数据接口
            method: 'POST', //请求方式
            contentType: 'application/json', //发送到服务器的数据编码类型
            page: true, //开启分页
            cols: cols, //表格列
            where: {"data": user}, //请求参数
            skin: 'grid', //表格风格
            even: true, //是否开启隔行背景
            toolbar: '#user-toolbar',
            loading: true, //显示加载条
            // totalRow: true, // 开启合计行
            height: 'full', //固定表头 窗机最大高度减去其他容器已占有的高度差,
            defaultToolbar: [ //右侧工具栏
                {
                    title: '首页',
                    layEvent: 'resetTableToFirstPage',
                    icon: 'layui-icon-home',
                },
                {
                    title: '刷新',
                    layEvent: 'refresh',
                    icon: 'layui-icon-refresh',
                },
                'filter',  //筛选列
                'print', //打印
                'exports'] //导出excel文件
            , done: function () {
                let id = this.id;
                // 行模式
                dropdown.render({
                    elem: '#rowMode',
                    data: [{
                        id: 'default-row',
                        title: '单行模式（默认）'
                    }, {
                        id: 'multi-row',
                        title: '多行模式'
                    }],
                    // 菜单被点击的事件
                    click: function (obj) {
                        let checkStatus = table.checkStatus(id)
                        let data = checkStatus.data; // 获取选中的数据

                        switch (obj.id) {
                            case 'default-row':
                                table.reload('user-table', {
                                    //height: 'full', //如果表格数据较少，剩余的空白就会很明显,所以恢复默认
                                    lineStyle: null // 恢复单行
                                });

                                //TODO 设置标记，标记页面刷新
                                localStorage.setItem('pageRefreshed', 'true');

                                //TODO 直接通过刷新页面，解决空白问题
                                location.reload();
                                //layer.msg('已设为单行模式');
                                break;
                            case 'multi-row':
                                table.reload('user-table', {
                                    // 设置行样式，此处以设置多行高度为例。若为单行，则没必要设置改参数 - 注：v2.7.0 新增
                                    height: 'full-35', //固定表头 窗机最大高度减去其他容器已占有的高度差,
                                    //会将表格的高度设置为浏览器窗口的高度减去 35px，而不管表格内容的实际高度。
                                    //如果表格数据较少，剩余的空白就会很明显。
                                    lineStyle: 'height: 75px;'
                                });
                                // layer.msg('即通过设置 lineStyle 参数可开启多行');
                                layer.msg('已设为多行模式');
                                break;
                        }
                    }
                });


            }
        });


        // 监听开关事件
        form.on('switch(user-enable)', function (data) {
            // 获取用户 ID
            let userId = data.value;
            // 获取当前开关状态
            let isLocked = !data.elem.checked;

            if (isLocked === false) {
                // 启用
                isLocked = '1';
            } else {
                // 禁用
                isLocked = '0';
            }

            console.log(userId);
            console.log(isLocked);
            console.log(JSON.stringify(data));

            console.log("请求：",JSON.stringify({
                userId: userId,
                isLocked: isLocked
            }))

            // 显示加载提示
            let loadingIndex = layer.load(2, {shade: 0.3});

            // 发送 AJAX 请求
            $.ajax({
                url: '/api/user/changeStatus', // 后端接口地址
                type: 'POST',             // 请求方式
                contentType: 'application/json',
                data: JSON.stringify({
                    userId: userId,
                    isLocked: isLocked
                }),
                success: function (res) {
                    // 关闭加载提示
                    layer.close(loadingIndex);

                    // 判断请求结果
                    if (res.code === 200) {
                        layer.msg('用户状态更新成功', {icon: 1});
                    } else {
                        layer.msg('用户状态更新失败: ' + res.message, {icon: 2});
                        // 恢复开关状态
                        data.elem.checked = !data.elem.checked;
                        form.render('checkbox'); // 重新渲染
                    }
                },
                error: function () {
                    // 关闭加载提示
                    layer.close(loadingIndex);
                    layer.msg('网络错误，请稍后重试', {icon: 2});
                    // 恢复开关状态
                    data.elem.checked = !data.elem.checked;
                    form.render('checkbox'); // 重新渲染
                }
            });
        });

        // 检查页面是否刚刷新过, 如果是则弹出提示--已设为单行模式
        window.onload = function () {
            // 检查是否是刚刷新过的页面
            if (localStorage.getItem('pageRefreshed') === 'true') {
                // 弹出提示
                layer.msg('已设为单行模式');

                // 清除标记，防止提示再次出现
                localStorage.removeItem('pageRefreshed');
            }
        };

        // 监听工具条 - 顶部工具栏
        table.on('toolbar(user-table)', function (obj) {
            if (obj.event === 'add') {
                window.add();
            } else if (obj.event === 'refresh') {
                // 刷新表格(本页)
                window.refresh();
            } else if (obj.event === 'batchRemove') {
                window.batchRemove(obj);
            } else if (obj.event === 'resetTableToFirstPage') {
                // 重置到表格的首页
                window.resetTableToFirstPage();
            }
        });

        // 监听工具条 - 每行的编辑和删除按钮
        table.on('tool(user-table)', function (obj) { //监听表格的工具条
            if (obj.event === 'remove') { //如果当前事件是删除
                window.remove(obj);
            } else if (obj.event === 'edit') {
                window.edit(obj);
            }
        });

        // 监听用户查询表单的提交事件
        form.on('submit(user-query)', function (data) {
            // 重新加载用户表格数据，根据表单填写的条件进行查询
            let teacher = getSearchCondition(); //获取搜索条件
            table.reload('user-table', {
                where: {"data": teacher}, //请求参数
                done: function (res, curr, count) {  // done 回调
                    // 监听分页查询后的返回值
                    console.log("分页查询返回的数据：", res);  // 返回的完整数据
                }
            })
            // 阻止表单的默认提交行为，避免页面刷新
            return false;
        });

        // 新增
        window.add = function () {
            layer.open({
                type: 2,
                title: '新增',
                shade: 0.1,
                // 根据设备类型动态设置区域大小
                // 如果是移动设备，则将区域大小设置为屏幕的100%，否则设置为固定大小500px
                area: [common.isModile() ? '100%' : '500px', common.isModile() ? '100%' : '450px'],
                content: MODULE_PATH + 'add.html' //内容为新增对话框-Form表单
            });
        }

        // 修改/编辑
        window.edit = function (obj) {
            let data = obj.data; //获取当前行数据

            layer.open({
                type: 2,
                title: '修改',
                shade: 0.1,
                area: ['500px', '500px'],
                content: MODULE_PATH + 'edit.html' //内容为编辑对话框-Form表单，单独在edit.html文件中
                ,
                success: function (layero, index) {
                    // 获取 iframe 中的 window 对象
                    let iframeWindow = layero.find('iframe')[0].contentWindow;

                    iframeWindow.initForm(data);
                }
            });
        }

        // 删除该用户
        window.remove = function (obj) {
            console.log("待删除用户id:" + obj.data.id);
            layer.confirm('确定要删除该用户?', {
                icon: 3,
                title: '提示'
            }, function (index) {
                layer.close(index);
                let loading = layer.load();
                $.ajax({
                    url: "/api/user/delete/" + obj.data.id,
                    dataType: 'json',  // 返回的数据类型为 JSON
                    type: 'DELETE',  // 请求类型为 DELETE
                    success: function (result) {
                        layer.close(loading);
                        if (result.code === 200) {
                            // 成功回调，处理返回的数据
                            console.log("删除成功", result);
                            layer.msg(result.msg, {
                                icon: 1,
                                time: 500
                            }, function () {
                                obj.del();
                            });
                        } else {
                            // 错误回调，处理错误信息
                            console.error("删除失败", result);
                            layer.msg(result.msg, {
                                icon: 2,
                                time: 500
                            });
                        }
                    }
                })
            });
        }

        // 批量删除
        window.batchRemove = function (obj) {
            let checkIds = common.checkField(obj, 'id'); // 获取选中行的id集合

            console.log("批量删除的id集合：", checkIds);

            // 拼接批量删除的url路径
            console.log("请求的url路径：", "/api/user/delete/batch/" + checkIds)

            if (checkIds === "") {
                layer.msg("未选中数据", {
                    icon: 3,
                    time: 1000
                });
                return false;
            }

            layer.confirm('确定要删除这些用户', {
                icon: 3,
                title: '提示'
            }, function (index) {
                layer.close(index);
                let loading = layer.load();
                $.ajax({
                    url: "/api/user/delete/batch/" + checkIds,
                    dataType: 'JSON',
                    type: 'DELETE',
                    success: function (result) {
                        layer.close(loading);
                        if (result.code === 200) {
                            console.log("批量删除成功", result);
                            layer.msg(result.msg, {
                                icon: 1,
                                time: 500
                            }, function () {
                                table.reload('user-table');
                            });
                        } else {
                            console.error("批量删除失败", result);
                            layer.msg(result.msg, {
                                icon: 2,
                                time: 500
                            });
                        }
                    }
                })
            });
        }

        // 刷新
        window.refresh = function (param) {
            sorts = [];
            table.reload('user-table');
        }

        // 回到表格首页，刷新并重置表格到第一页
        window.resetTableToFirstPage = function (param) {
            let teacher = {}; // 设置为空对象，让查询条件为空
            console.log("刷新", teacher);
            // 将页码重置为第一页
            table.reload('user-table', { //将页码归零，避免干扰下次查询
                where: {
                    "data": teacher // 使用空对象作为查询条件
                }, // 确保传递的查询条件格式正确
                page: {curr: 1} //将页码归零（重置为第一页）
            });
        }

        let sorts = []; // 用于存储多个排序条件，设为全局变量方便清空

        // 处理表头排序
        function handleTableHeaderSort() {
            let table = layui.table;
            // 禁用前端自动排序，以便由服务端直接返回排序好的数据

            // 触发排序事件
            table.on('sort(user-table)', function (obj) {
                console.log(obj.field); // 当前排序的字段名
                console.log(obj.type); // 当前排序类型：desc（降序）、asc（升序）、null（空对象，默认排序）
                console.log(this); // 当前排序的 th 对象

                // 如果排序方式为 null，则从 sorts 数组中移除该排序条件
                if (obj.type === null) {
                    console.log("排序被取消，忽略此列。");
                    return;
                }

                // 更新 sorts 数组，添加或更新排序条件
                let index = sorts.findIndex(s => s.field === obj.field);
                if (index > -1) {
                    // 如果已存在，则更新排序方式
                    sorts[index].type = obj.type;
                } else {
                    // 如果不存在，则添加新的排序条件
                    sorts.push({field: obj.field, type: obj.type});
                }

                console.log("排序条件：", sorts)

                let teacher = getSearchCondition(); //获取搜索条件
                // 重新加载表格数据，发送多个排序条件到后端
                table.reload('user-table', {
                    initSort: obj, // 记录初始排序，如果不设的话，将无法标记表头的排序状态。
                    where: {
                        data: teacher, // 将student放入data字段
                        sorts: sorts // 发送多个排序条件
                    }
                });
            });
        }

        // 调用表头排序
        handleTableHeaderSort();

        /**
         * 获取分页查询条件表单的数据对象
         * @returns {}
         */
        function getSearchCondition() {
            let formData = {}
            $("#queryForm").find('input,select').each(function () {
                let name = $(this).attr('name'); //获取元素的name属性
                let value = $(this).val(); // 获取输入框的值

                if (name && value) {
                    formData[name] = value; //将name和value添加到formData对象中
                }
                //console.log("name:" + name + " value:" + value);
            });
            console.log("查询条件:" + JSON.stringify(formData));
            return formData;
        }


        // 监听所有带有 .layui-icon-clear 的按钮
        $('.layui-icon-clear').on('click', function () {
            // 获取当前按钮的 ID
            let buttonId = $(this).attr('id');

            // 处理其他类型的清除逻辑，默认是文本框清除
            let inputId = '#input_' + buttonId.replace('btn_clear_', '');
            let inputElement = $(inputId);

            // 清空文本框内容
            inputElement.val('');
        })

    })
    ;
</script>
</body>
</html>